{literal}
<script type="text/javascript">
function getCheckedValue(radioObj) {
        if(!radioObj)
                return "";
        var radioLength = radioObj.length;
        if(radioLength == undefined)
                if(radioObj.checked)
                        return radioObj.value;
                else
                        return "";
        for(var i = 0; i < radioLength; i++) {
                if(radioObj[i].checked) {
                        return radioObj[i].value;
                }
        }
        return "";
}

function trueCF(){
        
        var f = document.forms['contact'];
       err = '';
        e = f.elements['cc_fname'];
        if(!e || e.value=='') {
            err += "\n\tType your first name";
        }
        e = f.elements['cc_address'];
        if(!e || e.value=='') {
            err += "\n\tType your address";
        }
        e = f.elements['cc_city'];
        if(!e || e.value=='') {
            err += "\n\tType your city name";
        }
        e = f.elements['cc_zip'];
        if(!e || e.value=='') {
            err += "\n\tType your zip code";
        }
        e = f.elements['cc_phone'];
        if(!e || e.value=='') {
            err += "\n\tType your phone number";
        }

        e = f.elements['cc_email'];
        if(!e || e.value=='') {
            err += "\n\tType your email address";
         }
       
                         e = f.elements['cc_email'];
                       var re = new RegExp("^[a-zA-Z]+[0-9a-zA-Z_]+@[0-9a-zA-Z]+.\.[a-zA-Z]+$");
                       
                                if(re.exec(e.value)==null){
                                err += "\n\tWrong email";
                              }
       rb = getCheckedValue(f.elements['payment']);
       
       if (rb != 'PayPal'){
                              
                e = f.elements['cc_cperson'];
                if(!e || e.value=='') {
                        err += "\n\tType contact person name";
                }
                e = f.elements['ccnumber'];
                if(!e || e.value=='') {
                        err += "\n\tType your credit card number";
                }
    if(e.value.length < 13 || e.value.length > 16){
        err += "\n\tWrong credit card number";
    }
    type = getCheckedValue(f.elements['cctype']);
    if(type != 'American Express'){
        var re = isCardTypeCorrect(e.value,type);
    }

                e = f.elements['cccvv'];
                if(!e || e.value=='') {
                        err += "\n\tType your CVV number";
                }

    if(e.value.length < 3 || e.value.length > 4){
        err += "\n\tInvalid CVV number";
    }                        

                e = f.elements['ccholdername'];
                if(!e || e.value=='') {
                        err += "\n\tType credit card owner";
                }
       }
                             
        if(err!='') {
            alert("You haven't fill all required fields:\n"+err);
            return false;
        }
        return true;
        
    }
</script>
{/literal}
<center>
     <form name='contact' method="post" action="{geturl plugin=checkout method=get}" onsubmit="javascript: return trueCF();">
     <input type="hidden" name="event" value="doSubmitCheckoutForm" />
<table summary='' style="background-color: #F2FAFF;width:100%;margin:0;padding:0;" cellpadding="0" cellspacing="0" border="0" >
        <tr>
                <td>
                        <table summary='' id="checkout" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
                                <tr>
                                        <td style='width:100%'>
                                                <table summary=''  id="cart"  width="100%" cellspacing="0" cellpadding="0" border="0">
                                                        <tr>
                                                                <th>PHOTO</th>
                                                                <th>ITEM</th>
                                                                <th>PRICE</th>
                                                                <th>QNT</th>
                                                                <th>TOTAL</th>
                                                        </tr>
                                                        {if empty($cart) || !count($cart)}
                                        <tr class="light">
                                            <td>&nbsp;</td>
                                            <td colspan="8" height="40">
                                                <p><b>No items collected in the shopping cart yet</b></p>
                                            </td>
                                        </tr>
                                                        {else}
                                                        
                                                        {foreach name="cart" from=$cart key=id item=item}
                                                        
                                                        <tr class="{cycle values='dark,light' advance=true}">
                                                                <td><a title="View details" href="{$host}?path=catalogpage&page=view_details&cid={$item.pid}&pid={$item.id}">{$item.thumbnail}</a></td>
                                                                <td align="center">{$item.title}</td>
                                                                <td align="center">${$item.price}</td>
                                                                <td align="center">
                                                                        <table summary=''>
                                                                                <tr>
                                                                                        <td align="center">
                                                                                                <input type="text" id="q{$id}" class="input_1" name="qty[{$id}]" value="{$item.qty}" style="width:22px; border: none; text-align: center; color: #516AB1; font-family: Arial; font-size: 11px; font-weight: bold;" readonly />
                        
                                                                                        </td>
                                                                                </tr>
                                                                        </table>
                                                                </td>
                                                                <td align="center">${$item.subtotal}</td>
                                                        </tr>
                                                        {/foreach}
                                                        {/if}
                                                </table>
                                                <table summary='' align="right" class="total" cellspacing='0' cellpadding='0'>
                                                        <tr>
                                                                <td align="center" class="total"><b style="font-family: Arial; font-size: 11px">Total Price:</b> ${$price}</td>
                                                        </tr>
                                                </table>
                                        </td>
                                </tr>                                                           
                        </table>
                </td>
        </tr>
        
        <tr>
                <td>
                        <table summary='' width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="content_text">
                                <tr class="dark" align="right">
                                        <td colspan="2" style="padding-left:30px;margin-left:30px;">
                                                <font color="Red" style="font-size: 12px; font-weight: bold; font-family: Arial"><sup>*</sup> - fields required</font>
                                        </td>
                                </tr>
                    <tr class="list_cart" align="left"><th colspan="6">&nbsp;Billing information</th></tr>
                    <tr>
                        <td colspan="6" width="100%" style="padding-left:0px;padding-right:0px;">
                        <table summary='' width="100%" cellpadding="0" cellspacing="0" border="0" id="content_text_bill">
                        <tr class="light"><td align="right" class="list_cart" width="20%">First Name:<sup><font color=red>*</font></sup>&nbsp;</td><td><input type="text" name="cc_fname" value="{$acount.client_billing_name}" class='inputtext' style="width:95%"></td></tr>
                        <tr class="light"><td align="right">Last Name:&nbsp;</td><td><input type="text" name="cc_lname" class='inputtext' style="width:95%"></td></tr>
                        <tr class="light"><td align="right">Country:&nbsp;</td><td><SELECT id="cc_country" style="width:95%" OnChange="FillState(document.contact.cc_country, document.contact.cc_state,'')"  name="cc_country" class="inputtext"></SELECT></td></tr>
                        <tr class="light"><td align="right">Address1:<sup><font color=red>*</font></sup>&nbsp;</td><td><input type="text" name="cc_address" class='inputtext' value="{$acount.client_billing_adress1}" style='width: 95%'></td></tr>
                        <tr class="light"><td align="right">Address2:&nbsp;</td><td><input type="text" name="cc_address2" value="{$acount.client_billing_adress2}" class='inputtext' style='width: 95%'></td></tr>
                
                        <tr class="light"><td align="right">City:<sup><font color=red>*</font></sup>&nbsp;</td><td><input type="text" name="cc_city" value="{$acount.client_billing_city}"  class='inputtext' style='width: 95%'></td></tr>
                        <tr class="light"><td align="right">State:&nbsp;</td><td><SELECT id="state" style="width:95%" size=1 name="cc_state" class="inputtext"></SELECT></td></tr>
                        <tr class="light"><td align="right">Zip:<sup><font color=red>*</font></sup>&nbsp;</td><td><input type="text" name="cc_zip" value="{$acount.client_billing_zip}"  class='inputtext' style='width: 95%'></td></tr>
                        <tr class="light"><td align="right" nowrap>Phone #:<sup><font color=red>*</font></sup>&nbsp;</td><td><input type="text" name="cc_phone" value="{$acount.client_billing_phone}" class='inputtext' style='width: 95%'></td></tr>
                        <tr class="light"><td align="right">Fax number:&nbsp;</td><td><input type="text" name="cc_fax" class='inputtext' style='width: 95%'></td></tr>
                
                        <tr class="light"><td align="right">E-mail:<sup><font color=red>*</font></sup>&nbsp;</td><td><input type="text" id='email_' name="cc_email" value="{$acount.client_email}" class='inputtext' style='width: 95%'></td></tr>
                        </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6" width="100%" >
                        <table summary='' width="100%" cellpadding="0" cellspacing="0" border="0" id="content_text_ship">
                                                <tr class="list_cart" align="left"><th colspan="2">&nbsp;Shipping details information</th>
                                                <tr class="light"><td align="right" width="20%">First Name:&nbsp;</td><td><input type="text" name="sfname" value="{$acount.client_shipping_name}" class='inputtext' style="width:95%"></td></tr>
                                                <tr class="light"><td align="right">Last Name:&nbsp;</td><td><input type="text" name="slname" class='inputtext' style="width:95%"></td></tr>
                                                <tr class="light"><td align="right">Country:&nbsp;</td><td>
                                                <SELECT style="width:95%" OnChange="FillState(document.contact.scountry, document.contact.sstate,'')"  name="scountry" class="inputtext"></SELECT>
                                                        </td></tr>
                                                <tr class="light"><td align="right">Address1:&nbsp;</td><td><input type="text" name="saddress1" class='inputtext' style='width: 95%' value="{$acount.client_shipping_adress1}"></td></tr>
                                                <tr class="light"><td align="right">Address2:&nbsp;</td><td><input type="text" name="saddress2" class='inputtext' style='width: 95%' value="{$acount.client_shipping_adress2}"></td></tr>
                                                <tr class="light"><td align="right">City:&nbsp;</td><td><input type="text" name="scity" class='inputtext' style='width: 95%' value="{$acount.client_shipping_city}"></td></tr>
                                                <tr class="light"><td align="right">State:&nbsp;</td><td>
                                                <SELECT style="width:95%" size=1 name="sstate" class="inputtext"></SELECT>
                                                </td></tr>
                                                <tr class="light"><td align="right">Zip:&nbsp;</td><td><input type="text" name="szip" class='inputtext' style='width: 95%' value="{$acount.client_shipping_zip}"></td></tr>
                                                </table>
                        </td>
                    </tr>

    <tr>
        <td align="center">
        <input type="radio" style='border:none;' name="payment" value="CC" checked >&nbsp;Pay via Credit Card
        </td>
    </tr>

<tr>
                        <td>
                                <div id="idCC" style="display:inline;">
                                                <table summary='' width="100%" cellpadding="0" cellspacing="0" border="0"  align="left" id="content_text_cinfo">
                                                    <tr class="list_cart" align="left"><th colspan="2">&nbsp;Credit Card Information</th>
                                                    <tr class="light"><td align="right">Contact Person:<sup><font color=red>*</font></sup>&nbsp;</td><td width='180'><input type="text" name="cc_cperson" value="{$acount.client_ccholdername}" class='inputtext' style='width: 95%'></td></tr>
                                                    <tr class="dark"><td align="right" valign="top">Credit card:&nbsp;</td>
                                                    
                                                        <td>
                                                        <table summary='' cellpadding="0" cellspacing="0" border="0">
                                                        <tr>
                                                            <td><img alt='' src="/img/cards/visa.png" border="0" ></td>
                                                            <td><img alt='' src="/img/cards/mastercard.png" border="0"></td>
                                                            <td><img alt='' src="/img/cards/discover.png" border="0"></td>
                                                            <td><img alt='' src="/img/cards/americanexpress.png" border="0"></td>
                                                        </tr>
                                                        <tr>
                                                
                                                            <td align="center"><input id='ctypeee1' type="radio" name="cctype" style='border:none;background-color: #D6EFFF;' value="VISA" {if $acount.client_cctype == 'VISA' || $acount.client_cctype==""} checked {/if}></td>
                                                            <td align="center"><input id='ctypeee2' type="radio" name="cctype" style='border:none;background-color: #D6EFFF;' value="MasterCard" {if $acount.client_cctype == 'MasterCard'} checked {/if}></td>
                                                            <td align="center"><input id='ctypeee3' type="radio" name="cctype" style='border:none;background-color: #D6EFFF;' value="Discover" {if $acount.client_cctype == 'Discover'} checked {/if}></td> 
                                                            <td align="center"><input id='ctypeee4' type="radio" name="cctype" style='border:none;background-color: #D6EFFF;' value="American Express" {if $acount.client_cctype == 'American Express'} checked {/if}></td>
                                                        </tr>
                                                        </table>
                                                        </td>
                                                    </tr>
                                                    <tr class="light"><td align="right">Credit Card Numer:<sup><font color=red>*</font></sup>&nbsp;</td><td><input type="text" value="{$acount.client_ccnumber}"  name="ccnumber" class='inputtext' style='width: 95%'></td></tr>
                                                    <tr class="light"><td align="right">CVV<sup><font color=red>*</font></sup>:&nbsp;</td><td><input type="text" name="cccvv" value="{$acount.client_cccvv}" class='inputtext' style='width: 95%'></td></tr>
                                                    <tr class="light"><td align="right">Credit Card Owner:<sup><font color=red>*</font></sup>&nbsp;</td><td><input type="text" value="{$acount.client_ccholdername}" name="ccholdername" class='inputtext' style='width: 95%'></td></tr>
                                                    <tr class="light"><td align="right">Expiration Date:<sup><font color=red>*</font></sup>&nbsp;</td>
                                                                        <td>
                                                                                <select name="client_ccexpdate_m">
                                                                                        {foreach from=$months item=m}
                                                                                        <option value="{$m}" {if $exp_m == $m} selected {/if}>{$m}</option>
                                                                                        {/foreach}
                                                                                </select>
                                                                                <select name="client_ccexpdate_y">
                                                                                        {foreach from=$years item=i}
                                                                                        <option value="{$i.year}" {if $exp_y == $i.year} selected {/if}>20{$i.year}</option>
                                                                                        {/foreach}
                                                                                </select>
                                        
                                                                        </td>
                                                                </tr>
                                            </table>
                                                </div>
                        </td>
                    </tr>

                    <tr>
                        <td style="height: 10px;"></td>
                    </tr>
                    <tr>
                                    <td align="center">                 
                                                <input type="button" value="Submit" onclick="if (trueCF()==true) document.forms['contact'].submit();" />
                                        &nbsp;&nbsp;&nbsp;
                                        <br /><br /><br />
                                    </td>
                                </tr>
                </table>
                </td>
        </tr>
</table>
                    </form>
{literal}
        <SCRIPT language="javascript" type="text/javascript">
            FillCountry(document.contact.cc_country,     document.contact.cc_state, 'USA'    );
            FillState(document.contact.cc_country,       document.contact.cc_state, 'Alabama');
            FillCountry(document.contact.scountry,       document.contact.sstate,   'USA'    );
            FillState(document.contact.scountry,         document.contact.sstate,   'Alabama');
        </SCRIPT>
{/literal}
</center>